<template>
  <div class="task_table">
    <el-form :inline="true" :model="value" class="demo-form-inline">
      <el-form-item label="任务名称">
        <el-input v-model="value.taskName" placeholder="请输入任务名称" clearable />
      </el-form-item>
      <el-form-item label="发送状态">
        <el-select v-model="value.sendStatus" placeholder="请选择发送状态" clearable>
          <el-option label="全部" value="" />
          <el-option label="成功" :value="1" />
          <el-option label="失败" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="$emit('taskListSearch')">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="taskList"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="taskName"
        label="任务名称"
        width="180"
      />
      <el-table-column
        prop="name"
        label="发送人"
        width="250"
      />
      <el-table-column
        prop="remark"
        label="备注"
      />
      <el-table-column
        label="发送状态"
      >
        <template slot-scope="scope">
          {{ scope.row.sendStatus ? '成功' : '失败' }}
        </template>
      </el-table-column>
      <el-table-column
        label="附件"
      >
        <template slot-scope="scope">
          <el-popover
            placement="right"
            trigger="click"
          >
            <div v-loading="fileListLoading" class="file_list">
              <div
                v-for="(item, index) in fileList"
                :key="index"
                :class="item.id && 'file_list_item'"
                @click="fileAction(item, 'view')"
              >
                {{ item.originName }}
              </div>
            </div>

            <el-link slot="reference" @click="getFileList(scope.row.id)">查看</el-link>
          </el-popover>
          <el-popover
            placement="right"
            trigger="click"
          >
            <div v-loading="fileListLoading" class="file_list">
              <div
                v-for="(item, index) in fileList"
                :key="index"
                :class="item.id && 'file_list_item'"
                @click="fileAction(item, 'down')"
              >
                {{ item.originName }}
              </div>
            </div>

            <el-link slot="reference" @click="getFileList(scope.row.id)">下载</el-link>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <div class="task_list_pagination">
      <el-pagination
        background
        :total="total"
        :current-page="
          (value &&
            value.pageIndex ) ||
            1
        "
        :page-sizes="[10, 20, 30]"
        :page-size="(value &&
          value.pageSize ) ||
          10"
        layout="prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getFilePage, fileView, windowDownFile } from '@/api/file';
export default {
  name: 'TaskTable',
  props: {
    taskList: {
      type: Array,
      default: () => ([])
    },
    value: {
      default: () => ({}),
      type: Object
    },
    total: {
      type: Number,
      default: () => 0
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      fileListLoading: false,
      fileList: []
    };
  },
  methods: {
    handleSizeChange(val) {
      this.value.pageIndex = 1;
      this.value.pageSize = val;
    },
    handleCurrentChange(val) {
      this.value.pageIndex = val;
    },
    getFileList(id) {
      this.fileListLoading = true;
      getFilePage({
        pageIndex: 0,
        pageSize: 500,
        guid: id,
        type: 'FJ01'
      }).then(res => {
        const { data, success, message } = res;
        if (success && data.length) {
          this.fileList = data;
        } else {
          this.fileList = [{ originName: '暂无附件' }];
          this.$message.error(message);
        }
        this.fileListLoading = false;
      });
    },
    fileAction(file, type) {
      const fileDown1 = async row => {
        windowDownFile(file);
      };
      const fileView1 = row => {
        fileView(file.id);
      };
      const eventMap = {
        down: fileDown1,
        view: fileView1
      };
      file.id && eventMap[type](file);
    }
  }
};
</script>

<style lang='scss' scoped>

  .task_table{
    .task_list_pagination{
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      //页码样式
      ::v-deep .el-pagination.is-background {
        .el-pager li:not(.disabled).active {
          background-color: #1492ff;
          color: #fff;
        }
        .el-pager li {
          background-color: #fff;
          color: rgba(0, 0, 0, 0.65);
          border: 1px solid #dddddd;
        }
        .btn-prev,
        .btn-next {
          background-color: #fff;
          color: rgba(0, 0, 0, 0.65);
          border: 1px solid #dddddd;
        }
      }
      ::v-deep .el-pagination__jump {
        margin-left: 0;
      }
      ::v-deep .el-input__inner {
        height: 28px !important;
      }
    }
  }
  .el-popover{
    .file_list{
      .file_list_item{
        cursor: pointer;
        &:hover {
          color: #1492ff;
        }
      }
    }
  }
</style>
